<template>
    <div>
        <el-form :inline="true" :model="searchMap" style="margin:20px" ref="searchFormRef">
            <el-form-item prop="name">
                <el-input v-model="searchMap.name" placeholder="根据姓名查询" style="width:150px" />
            </el-form-item>
            <el-form-item prop="direction">
                <el-select v-model="searchMap.direction" placeholder="根据学习方向查询" style="width:180px">
                    <el-option v-for="item in directionOptions" :key="item._id" :value="item._id" :label="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item prop="class">
                <el-select v-model="searchMap.class" placeholder="根据所在班级查询" style="width:180px">
                    <el-option v-for="item in classOptions" :key="item._id" :value="item._id" :label="item.classname" />
                </el-select>
            </el-form-item>
            <el-form-item prop="teacher_id">
                <el-select v-model="searchMap.teacher_id" placeholder="根据授课教师查询" style="width:180px">
                    <el-option v-for="item in teacherOptions" :key="item._id" :value="item._id" :label="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item prop="manager_id">
                <el-select v-model="searchMap.manager_id" placeholder="根据学管查询" style="width:150px">
                    <el-option v-for="item in managerOptions" :key="item._id" :value="item._id" :label="item.name" />
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="handleAdd">添加学生</el-button>
            <el-button type="primary" @click="getStudentList">查询</el-button>
            <el-button @click="resetForm(searchFormRef)">重置</el-button>
        </el-form>
        <el-table :data="students" :border="true" style="width: 100%" height="500px">
            <el-table-column type="expand">
                <template #default="props">
                    <div m="4">
                        <p m="t-0 b-2">学生姓名: {{ props.row.name }}</p>
                        <p m="t-0 b-2">性别: {{ dataFilter(props.row.gender, genderOptions) }}</p>
                        <p m="t-0 b-2">学校: {{ props.row.school }}</p>
                        <p m="t-0 b-2">专业: {{ props.row.major }}</p>
                        <p m="t-0 b-2">年级: {{ dataFilter(props.row.grade, gradeOptions) }}</p>
                        <p m="t-0 b-2">学历: {{ dataFilter(props.row.education, educationOptions) }}</p>
                        <p m="t-0 b-2">学习方向: {{ dataFilter(props.row.direction, directionOptions) }}</p>
                        <p m="t-0 b-2">身份号码: {{ props.row.id_number }}</p>
                        <p m="t-0 b-2">电话号码: {{ props.row.phone }}</p>
                        <p m="t-0 b-2">家长姓名: {{ props.row.parent }}</p>
                        <p m="t-0 b-2">家长联系电话: {{ props.row.parent_phone }}</p>
                        <p m="t-0 b-2">家庭住址: {{ props.row.address }}</p>
                        <p m="t-0 b-2">QQ号码: {{ props.row.qq }}</p>
                        <p m="t-0 b-2">所在班级: {{ classFilter(props.row.class, classOptions) }}</p>
                        <p m="t-0 b-2">入学时间: {{ props.row.admission_date }}</p>
                        <p m="t-0 b-2">授课教师: {{ dataFilter(props.row.teacher_id, teacherOptions) }}</p>
                        <p m="t-0 b-2">学管: {{ dataFilter(props.row.manager_id, managerOptions) }}</p>
                        <p m="t-0 b-2">照片:
                            <el-image v-for="(item, index) in props.row.pictures" :key="index" 
                            style="width: 200px; height: 200px"
                                :src="baseApi + '/upload/' + item"  :max-scale="7" :min-scale="0.2"
                                :preview-src-list="getSrcList(props.row.pictures)" :initial-index="0" fit="cover" />
                        </p>
                        <p m="t-0 b-2">
                            备注信息: <span v-html="props.row.note"></span>
                        </p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="序号" type="index" width="80px" />
            <el-table-column label="学生姓名" prop="name" width="100px" />
            <el-table-column label="性别" prop="gender" width="80px">
                <template #default="scope">
                    {{ dataFilter(scope.row.gender, genderOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="学习方向" prop="direction">
                <template #default="scope">
                    {{ dataFilter(scope.row.direction, directionOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="所在班级" prop="class">
                <template #default="scope">
                    {{ classFilter(scope.row.class, classOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="身份号码" prop="id_number" />
            <el-table-column label="入学时间" prop="admission_date" />
            <el-table-column label="授课教师" prop="teacher_id">
                <template #default="scope">
                    {{ dataFilter(scope.row.teacher_id, teacherOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="学管" prop="manager_id">
                <template #default="scope">
                    {{ dataFilter(scope.row.manager_id, managerOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">

                    <el-button size="small" @click="handleEdit(scope.row._id)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>
<script setup lang="ts">
import type { studentInfoData } from '@/api/student/type';
import { onMounted, ref } from 'vue';
import useStudentStore from '@/store/modules/student';
import useRoleStore from '@/store/modules/role';
import useUserStore from '@/store/modules/user';
import useClassStore from '@/store/modules/class';
import type { roleInfoData } from '@/api/role/type';
import type { userInfoData } from '@/api/user/type';
import type { classInfoData } from '@/api/class/type';
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus';
const baseApi = import.meta.env.VITE_APP_BASE_API
const studentStore = useStudentStore()
//学生列表
const students = ref<studentInfoData[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchFormRef = ref<FormInstance>()
//条件查询对象
const searchMap = ref({
    name: "",
    direction: "",
    teacher_id: "",
    manager_id: "",
    class: ""
});
const handleSizeChange = (val: number) => {
    pageSize.value = val
    getStudentList()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getStudentList()
}

const getStudentList = () => {
    studentStore
        .getStudentList({ page: currentPage.value, size: pageSize.value, searchMap: searchMap.value })
        .then((response) => {
            students.value = studentStore.students;
            total.value = response?.total as number
        })
}

const handleEdit = (_id: string) => {
    $router.push("/student/update/" + _id)
}
const handleDelete = (_id: string) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            studentStore.deleteStudent(_id).then(() => {
                getStudentList()
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            })
        })
        .catch(() => {
        })
}
// 关于格式化数据
const roleStore = useRoleStore();
const userStore = useUserStore();
const classStore = useClassStore();
//角色数组
const roleOptions = ref<roleInfoData[]>([])
//用户数组
const userOptions = ref<userInfoData[]>([])
//班级数组
const classOptions = ref<classInfoData[]>([])
//教师id
const teacher_role_id = ref("")
//学管id
const manager_role_id = ref("")
//教师数组
const teacherOptions = ref<userInfoData[]>([]);
//学管数组
const managerOptions = ref<userInfoData[]>([])
//性别、年级、学历、学习方向数据类型
interface filterData {
    _id: string,
    name: string
}
//性别数据列表
const genderOptions = ref<filterData[]>([
    { _id: '0', name: "男" },
    { _id: '1', name: "女" }
])
//年级数据列表
const gradeOptions = ref<filterData[]>([
    { _id: '1', name: "大一" },
    { _id: '2', name: "大二" },
    { _id: '3', name: "大三" },
    { _id: '4', name: "大四" },
    { _id: '5', name: "在读研究生" },
])
//学历数据列表
const educationOptions = ref<filterData[]>([
    { _id: '1', name: "专科" },
    { _id: '2', name: "本科" },
    { _id: '3', name: "硕士" },
    { _id: '4', name: "社会" },
])
//学习方向数据列表
const directionOptions = ref<filterData[]>([
    { _id: '1', name: "web前端" },
    { _id: '2', name: "java" },
    { _id: '3', name: "C/C++" },
    { _id: '4', name: "直播电商" },
    { _id: '5', name: "少儿编程" },
    { _id: '6', name: "嵌入式" },
])
//获取角色列表
const roleList = () => {
    return new Promise((resolve, _reject) => {
        if (roleStore.roles && roleStore.roles.length) {
            roleOptions.value = roleStore.roles;
            roleOptions.value.forEach((item) => {
                if (item.name == "教师") {
                    teacher_role_id.value = item._id as string;
                } else if (item.name == "学管") {
                    manager_role_id.value = item._id as string;
                }
            });
            resolve(true);
        } else {
            roleStore.roleList().then(() => {
                roleOptions.value = roleStore.roles as roleInfoData[];
                roleOptions.value.forEach((item) => {
                    if (item.name == "教师") {
                        teacher_role_id.value = item._id as string;
                    } else if (item.name == "学管") {
                        manager_role_id.value = item._id as string;
                    }
                });
            });
            resolve(true)
        }
    })
}
//获取用户数组
const getUserList = () => {
    return new Promise((resolve, _reject) => {
        if (userStore.users && userStore.users.length) {
            userOptions.value = userStore.users;
            userOptions.value.forEach((item) => {
                if (item.role_id == teacher_role_id.value) {
                    teacherOptions.value.push(item)
                } else if (item.role_id == manager_role_id.value) {
                    managerOptions.value.push(item)
                }
            });
            resolve(true);
        } else {
            userStore.getUserAll().then(() => {
                userOptions.value = userStore.users;
                userOptions.value.forEach((item) => {

                    if (item.role_id == teacher_role_id.value) {
                        teacherOptions.value.push(item)

                    } else if (item.role_id == manager_role_id.value) {
                        managerOptions.value.push(item)
                    }
                });
            });
            resolve(true)
        }
    })
}
//获取班级数组
const getClassList = () => {
    return new Promise((resolve, _reject) => {
        if (classStore.classes && classStore.classes.length) {
            classOptions.value = classStore.classes;
            console.log('class', classOptions.value);

            resolve(true);
        } else {
            classStore.getClassAll().then(() => {
                classOptions.value = classStore.classes;
                resolve(true)
            });
        }
    })
}


//格式化数据
const dataFilter = (_id: string, options: any) => {
    //@ts-ignore
    const obj = options?.find(item => item._id == _id)
    return obj ? obj.name : ''
}
//格式化班级数据
const classFilter = (_id: string, options: any) => {
    //@ts-ignore
    const obj = options?.find(item => item._id == _id)
    return obj ? obj.classname : ''
}

//引入路由
import { useRouter } from 'vue-router';
let $router = useRouter()
//跳转到添加/编辑学生组件
const handleAdd = () => {
    $router.push(`/student/update/-1`)
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const getSrcList = (imgList: string[]) => {
    return imgList.map(item => baseApi + "/upload/" + item)
}


onMounted(() => {
    roleList().then(() => {
        getUserList().then(() => {
            getClassList().then(() => {
                getStudentList()
            })
        })
    })
})

</script>

<style scoped></style>